import React, {useEffect, useState} from 'react'
import {
	Form,
	Row,
	Col,
	Space,
	Button,
	Table,
	Input,
	Select,
	Pagination,
} from 'antd'
import type {PaginationProps} from 'antd'
import {getDict} from '@/service/common/dict'
import AdvancedModal from '@/components/Modal/AdvancedModal'
import {FormSelect} from '@/components/SearchForm/SearchFormItem'
import {commodityProgrammes} from '@/service/order'

import {getCarTypeList} from '@/service/carMessage/list'
import {modelSeriesFun} from '@/utils/common'

const layout = {
	labelCol: {span: 8},
	wrapperCol: {span: 16},
}
const tailLayout = {
	wrapperCol: {offset: 8, span: 16},
}
const inputStyle = {width: '100px'}
function SelectScheme({
	setIsOpen,
	isOpen,
	title,
	selectOrder,
	type,
	orgIds,
}: any) {
	const [form] = Form.useForm()
	const [page, setPage] = useState({
		size: 10,
		current: 1,
	})

	const [dict, setDict] = useState({
		order_rent_type: [], // 订单类型
	})
	const [total, setTotal] = useState(0)
	const [formValue, setFormValue] = useState<any>()
	const [programmesList, setprogrammesList] = useState([])
	const [carTypeList, setCarTypeList] = useState<any>([])
	const [rentAmountStart, setRentAmountStart] = useState('')
	const [rentAmountEnd, setRentAmountEnd] = useState('')
	// 获取品牌车系
	const onCarTypeListFun = () => {
		getCarTypeList().then((res: any) => {
			if (res?.success) {
				setCarTypeList(modelSeriesFun(res.data))
			}
		})
	}

	const getList = (param: any, value: any) => {
		const data: any = {
			commoditySchemeVO: {
				affiliatedCompanyId: orgIds,
				brandId: value?.brandId || null,
				rentTypeId: value?.rentTypeId || null,
				schemeStatus: '有效',
				auditStatus: '审核通过',
				commodityName: value?.commodityName || null,
				rentAmountStart: rentAmountStart || null,
				rentAmountEnd: rentAmountEnd || null,
			},
			query: {
				current: param?.current,
				size: Number(param?.size),
				ascs: 'null',
				descs: 'update_time',
			},
		}
		commodityProgrammes(data).then((res: any) => {
			setprogrammesList(res?.data?.records)
			setTotal(res?.data?.total)
		})
	}

	const onReset = () => {
		setRentAmountStart('')
		setRentAmountEnd('')
		form.resetFields()
		setFormValue({})
		const count = {
			size: 10,
			current: 1,
		}
		setPage(count)
		if (type === '1') {
			getList(count, {rentTypeId: '1'})
		} else {
			getList(count, {})
		}
	}
	useEffect(() => {
		if (isOpen) {
			const info: any = {
				orgId: orgIds,
			}
			// type是续租，续租只能续经租的订单
			if (type === '1') {
				info.rentTypeId = '1'
			}
			const pages = {
				size: 10,
				current: 1,
			}
			setFormValue({})
			setPage(pages)
			getList(pages, info)
			onCarTypeListFun()
			getDict(
				{
					dictKeys: ['order_rent_type'],
				},
				(res: any) => {
					setDict(res)
				},
			)
		} else {
			setRentAmountStart('')
			setRentAmountEnd('')
			form.resetFields()
		}
	}, [isOpen])
	const onFinish = (values: any) => {
		setFormValue(values)
		const data1 = {...values}
		const count = {
			size: 10,
			current: 1,
		}
		setPage(count)
		if (type === '1') {
			data1.rentTypeId = '1'
		}
		getList(count, data1)
	}

	const pginatiChange: PaginationProps['onChange'] = (pages) => {
		const param = {
			size: 10,
			current: pages,
		}
		setPage(param)
		// type是续租，续租只能续经租的订单
		if (type === '1') {
			getList(param, {...formValue, rentTypeId: '1'})
		} else {
			getList(param, formValue)
		}
	}
	const onDetails = (value: any) => {
		setIsOpen(false)
		selectOrder(value)
	}
	const columns: any = [
		{
			title: '商品方案名称',
			dataIndex: 'commodityName',
			key: 'commodityName',
			align: 'center',
			width: 250,
		},
		{
			title: '主体',
			dataIndex: 'subjectName',
			key: 'subjectName',
			align: 'center',
			width: 100,
		},
		{
			title: '公司',
			dataIndex: 'affiliatedCompany',
			key: 'affiliatedCompany',
			align: 'center',
			width: 100,
		},
		{
			title: '城市',
			dataIndex: 'cityName',
			key: 'cityName',
			align: 'center',
			width: 100,
		},
		{
			title: '开始时间',
			dataIndex: 'beginTime',
			key: 'beginTime',
			align: 'center',
			width: 100,
		},
		{
			title: '结束时间',
			dataIndex: 'endTime',
			key: 'endTime',
			align: 'center',
			width: 100,
		},
		{
			title: '品牌/车型/车系',
			dataIndex: 'brandInfo',
			key: 'brandInfo',
			align: 'center',
			width: 150,
		},
		{
			title: '星级',
			dataIndex: 'carStar',
			key: 'carStar',
			align: 'center',
			width: 150,
		},
		{
			title: '订单类型',
			dataIndex: 'rentTypeName',
			key: 'rentTypeName',
			align: 'center',
			width: 100,
		},
		{
			title: '租期',
			dataIndex: 'leaseTerm',
			key: 'leaseTerm',
			align: 'center',
			width: 100,
		},
		{
			title: '定金',
			dataIndex: 'depositAmount',
			key: 'depositAmount',
			align: 'center',
			width: 100,
			render: (text: any) => (
				<>{text === -1 ? <span>0</span> : <span>{text}</span>}</>
			),
		},
		{
			title: '押金',
			dataIndex: 'mortgageAmount',
			key: 'mortgageAmount',
			align: 'center',
			width: 100,
			render: (text: any) => (
				<>{text === -1 ? <span>0</span> : <span>{text}</span>}</>
			),
		},
		{
			title: '月租金（新签）',
			dataIndex: 'rentAmount',
			key: 'rentAmount',
			align: 'center',
			width: 100,
			render: (text: any) => (
				<>{text === -1 ? <span>0</span> : <span>{text}</span>}</>
			),
		},
		{
			title: '月租金（续签）',
			dataIndex: 'renewRentAmount',
			key: 'renewRentAmount',
			align: 'center',
			width: 100,
			render: (text: any) => (
				<>{text === -1 ? <span>0</span> : <span>{text}</span>}</>
			),
		},
		{
			title: '首付款',
			dataIndex: 'advancePaymentAmount',
			key: 'advancePaymentAmount',
			align: 'center',
			width: 100,
			render: (text: any) => (
				<>{text === -1 ? <span>0</span> : <span>{text}</span>}</>
			),
		},
		{
			title: '尾款',
			dataIndex: 'balancePaymentAmount',
			key: 'balancePaymentAmount',
			align: 'center',
			width: 100,
			render: (text: any) => (
				<>{text === -1 ? <span>0</span> : <span>{text}</span>}</>
			),
		},
		{
			title: '方案状态',
			dataIndex: 'schemeStatus',
			key: 'schemeStatus',
			align: 'center',
			width: 100,
		},
		{
			title: '审核状态',
			dataIndex: 'auditStatus',
			key: 'auditStatus',
			align: 'center',
			width: 100,
		},
		{
			title: '操作',
			dataIndex: 'operation',
			key: 'operation',
			align: 'center',
			fixed: 'right',
			width: 80,
			render: (_text: any, record: any) => (
				<>
					<Button
						type="link"
						disabled={
							!(
								record?.rentTypeId === '1' ||
								record?.rentTypeId === '2'
							)
						}
						onClick={() => {
							onDetails(record)
						}}>
						选择
					</Button>
				</>
			),
		},
	]
	const data: any = {
		scroll: {x: 800, y: 480},
	}

	return (
		<AdvancedModal
			title={title}
			setIsOpen={setIsOpen}
			isOpen={isOpen}
			width={980}
			footer={null}>
			<Form form={form} onFinish={onFinish} {...layout}>
				<Row gutter={24}>
					<Col span={12}>
						<FormSelect
							name="brandId"
							label="品牌/车系/车型"
							placeholder="请选择品牌/车系/车型"
							keys="id"
							title="fullName"
							items={[...carTypeList]}
						/>
					</Col>
					<Col span={12}>
						<Form.Item name="" label="租金区间">
							<Input
								style={inputStyle}
								onChange={(e) =>
									setRentAmountStart(e.target.value)
								}
							/>{' '}
							—{' '}
							<Input
								style={inputStyle}
								onChange={(e) =>
									setRentAmountEnd(e.target.value)
								}
							/>
						</Form.Item>
					</Col>
				</Row>
				<Row gutter={24}>
					<Col span={12}>
						{type !== '1' && (
							<Form.Item label="租赁类型" name="rentTypeId">
								<Select
									options={dict?.order_rent_type}
									fieldNames={{
										label: 'dictValue',
										value: 'dictKey',
									}}
								/>
							</Form.Item>
						)}
					</Col>
					<Col span={12}>
						<Form.Item label="商品方案名称" name="commodityName">
							<Input placeholder="请输入商品方案名称" />
						</Form.Item>
					</Col>
				</Row>
				<Row gutter={24}>
					<Col span={12} offset={12}>
						<Form.Item {...tailLayout}>
							<Space>
								<Button type="primary" htmlType="submit">
									查询
								</Button>
								<Button onClick={onReset}>重置</Button>
							</Space>
						</Form.Item>
					</Col>
				</Row>
			</Form>
			<Table
				pagination={false}
				columns={columns}
				dataSource={programmesList}
				size="small"
				rowKey="id"
				{...data}
			/>
			<div style={{textAlign: 'right'}}>
				<Pagination
					onChange={pginatiChange}
					pageSize={10}
					showSizeChanger
					current={page?.current}
					total={total}
					showTotal={(totals: number | string) => `总数：${totals}条`}
				/>
			</div>
		</AdvancedModal>
	)
}

export default SelectScheme
